<template>
	<div class="resource-dots" v-loading="isLoading">
		<div class="add-dots-box">
			<div class="title">添加打点 {{ resourceVideoName }}</div>
			<dot-video
				v-if="videoVid && polyvToken"
				:key="dotKey"
				:vid="videoVid"
				:polyv-token="polyvToken"
				:type="hasSave?'reset':'add'"
				:start-time="lastStartTime"
				:end-time="lastEndTime"
				:resource-id="resourceId"
				:project-subject-list="projectSubjectList"
				@save-success="onSaveSuccess"
			/>
		</div>
		<div class="dots-list-box">
			<div class="title">已打点列表</div>
			<video-list
				ref="videoRef"
				v-if="videoVid && polyvToken"
				:polyv-token="polyvToken"
				:vid="videoVid"
				:resource-id="resourceId"
				:project-subject-list="projectSubjectList"
			/>
		</div>
	</div>
</template>

<script>
    import coursewareApi from "@rc/apis/rc/courseware.mjs";
    import DotVideo from './components/dot-video/index.vue';
    import VideoList from './components/video-list/index.vue';

	export default {
		name: "resource-dots",
        components:{
            DotVideo,
            VideoList
        },
		data() {
			return {
                resourceId: '',
                videoVid: '',
                resourceInfo: {},
                isLoading: false,
                projectSubjectList: [],
                dotKey: 0,
                lastStartTime: 0,
                hasSave: false,
                lastEndTime: 0,
                searchFomData: null,
				polyvToken: '', // 保利威
				resourceVideoName: '',
			};
		},
        created(){
            localStorage.setItem('searchFomData','');
        },
        async mounted() {
            const { id, videoVid, resourceVideoName }  = this.$route.query;
            if (!id || !videoVid) {
                this.$alert("缺失资源参数，请确认资源信息是否正常", "提示");
                return;
			}
            this.resourceId = id;
            this.videoVid = videoVid;
			this.resourceVideoName = resourceVideoName;
			this.queryPolyvVideoToken();
		},

        watch:{
            resourceId:{
                handler(val){
                    val && this.queryProjectSubjectInfo();
                }
            }
        },
        beforeRouteLeave(to, from, next) {
			to.meta.fromPage = "dot";
			to.meta.pageIndex = Number(this.$route.query.pageIndex);
			next();
		},
		methods: {
            //新增打点成功
            onSaveSuccess({endTime,playerDuration,searchFomData}){
                this.hasSave = true;
                if(endTime===playerDuration){
                    endTime = 0;
                }
                console.log(this.lastStartTime,this.lastEndTime);
                this.lastStartTime = endTime;
                this.lastEndTime = playerDuration;
                this.searchFomData = searchFomData;
                //刷新已打点视频列表
                this.$refs.videoRef.api_reloadList();
                this.dotKey++;
            },
            // 获取资源关联的项目科目列表
			queryProjectSubjectInfo() {
				coursewareApi.queryCourseWareProjectSubjectInfo({
					data: {
						resourceId: this.resourceId
					},
					success: (res) => {
						this.projectSubjectList = res;
					}
				});
			},
			// 查询保利威视频播放TOKEN
			queryPolyvVideoToken() {
				Http.callService({
					url: "fs/polyv/token/get",
					data: {
						videoId: this.videoVid.trim(),
						type: "R"
					}
				}).success((result) => {
					this.polyvToken = result.token;
				});
			}
		}
	};
</script>
<style>
    body{
        width: 100vw;
        overflow: hidden;
    }
</style>
<style lang="less" scoped>

	.resource-dots {
		box-sizing: border-box;
		height: 100%;

		background-color: #f4f5f9;
		.add-dots-box, .dots-list-box{
			background-color: #fff;
			margin-bottom: 16px;
			padding: 0 21px 16px 16px;
			position: relative;
			border-radius: 2px;
			&::after {
				position: absolute;
				display: block;
				content: "";
				width: 5px;
				height: 19px;
				background: linear-gradient(48deg, #ff6437, #ffbba2 100%);
				border-radius: 0px 4px 4px 0px;
				left: 0px;
				top: 18px;
			}
			.title {
				color: #3a3d4b;
				font-weight: 700;
				font-size: 16px;
				height: 55px;
				line-height: 55px;
				border-bottom: 1px dashed #f0f0f0;
				margin-bottom: 16px;
			}
		}

	}
</style>
